<!--   [PAGE]] : 银行卡
       @Author  : ljq
       @Created : 2025/10/5
 -->
<template>
  <div class="app-container">
    <!-- ------------------------ START: 查询框 -------------------------->
    <el-form class='query' :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="卡号">
        <el-input v-model="queryParams.params.cardIdLike" placeholder="请输入银行卡号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>

      <!--
            <el-form-item label="用户">
              <select-user v-model="queryParams.userId" placeholder="请选择用户"/>
            </el-form-item>
      -->

      <el-form-item label="类型">
        <el-select v-model="queryParams.cardType" placeholder="请选择银行卡类型" clearable>
          <el-option v-for="dict in dict.type.business_bank_card_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>


      <el-form-item label="银行">
        <select-bank v-model="queryParams.bankId" placeholder="请选择银行类型"/>
      </el-form-item>
      <el-form-item label="币种">
        <el-select v-model="queryParams.currency" placeholder="请选择币种" clearable>
          <el-option v-for="dict in dict.type.business_bank_card_currency" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker v-model="queryParams.params.expiryDateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="请选择银行卡状态" clearable>
          <el-option v-for="dict in dict.type.business_bank_card_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>

      <el-form-item class="option">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- ------------------------- END: 查询框 --------------------------->

    <!-- ---------------------- START: 主数据区域------------------------->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:bankCard:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:bankCard:remove']">批量删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"/>
    </el-row>


    <el-table v-loading="loading" :data="list"
              @selection-change="handleSelectionChange"
              @cell-mouse-enter="handleCellMouseEnter"
              @cell-mouse-leave="handleCellMouseLeave"
    >
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="编号" align="center" prop="id" v-if="columns[0].visible"/>
      <el-table-column label="名称" align="center" prop="cardName" v-if="columns[5].visible"/>
      <el-table-column label="银行" align="center" prop="bankId" v-if="columns[6].visible">
        <template slot-scope="scope">
          <select-bank isCol :value="scope.row.bankId"/>
        </template>
      </el-table-column>
      <el-table-column label="卡号" align="center" prop="cardId" v-if="columns[1].visible" min-width="120%">
        <template slot-scope="scope">
          <div>
            <span v-if="isCellHovered(scope.row.id, 'cardId')">
            {{ scope.row.cardNumber }}
            </span>
            <span v-else class="balance-placeholder">
            {{ scope.row.cardId }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所有者" align="center" prop="userId" v-if="columns[2].visible">
        <template slot-scope="scope">
          <select-user isCol :value="scope.row.userId"/>
        </template>
      </el-table-column>
      <el-table-column label="卡BIN号" align="center" prop="cardBin" v-if="columns[3].visible"/>
      <el-table-column label="类型" align="center" prop="cardType" v-if="columns[4].visible" min-width="50%">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_bank_card_type" :value="scope.row.cardType"/>
        </template>
      </el-table-column>
      <el-table-column label="币种" align="center" prop="currency" v-if="columns[7].visible" min-width="50%">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_bank_card_currency" :value="scope.row.currency"/>
        </template>
      </el-table-column>
      <el-table-column label="有效期" align="center" prop="expiryDate" v-if="columns[8].visible"/>

      <el-table-column label="账户余额" align="center" prop="balance" v-if="columns[9].visible">
        <template slot-scope="scope">
          <div v-if="['1', '2'].includes(scope.row.status)">
            <span v-if="isCellHovered(scope.row.id, 'balance')">
              {{ scope.row.balance }}
            </span>
            <span v-else class="balance-placeholder">
              ***
            </span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="status" v-if="columns[10].visible" min-width="50%">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.business_bank_card_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[11].visible"/>
      <el-table-column label="创建者" align="center" prop="createBy" v-if="columns[12].visible"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[13].visible"/>
      <el-table-column label="更新者" align="center" prop="updateBy" v-if="columns[14].visible"/>

      <!-- 操作列组件 -->
      <operation-column :permi="permi" @edit="handleUpdateOver" @delete="handleDelete">
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            @click="chackCard(row)"
          >帐号验证
          </el-button>
        </template>
      </operation-column>


    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    <!-- ---------------------- END: 主数据区域 ------------------------>

    <!-- ------------------------ START: 弹出框 -------------------------->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>
          <el-col :span="24">
            <el-form-item label="卡号" prop="cardId">
            <span class="text" v-if="['1', '2'].includes(form.status)">
              {{ show.cardNumber.join(" - ") }}
            </span>
              <span v-else>
              <el-input v-model="show.cardNumber[0]" style="width:4rem" maxlength="4" @change="cardIdChange"/> -
              <el-input v-model="show.cardNumber[1]" style="width:4rem" maxlength="4" @change="cardIdChange"/> -
              <el-input v-model="show.cardNumber[2]" style="width:4rem" maxlength="4" @change="cardIdChange"/> -
              <el-input v-model="show.cardNumber[3]" style="width:4rem" maxlength="4" @change="cardIdChange"/> -
              <el-input v-model="show.cardNumber[4]" style="width:4rem" maxlength="4" @change="cardIdChange"/>
              <el-input v-model="form.cardNumber" placeholder="请输入银行卡号" v-show="false"/>
            </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="类型" prop="cardType">
              <span class="text" v-if="['1', '2'].includes(form.status)">
                <dict-tag :options="dict.type.business_bank_card_type" :value="form.cardType"/>
              </span>
              <span v-else>
              <el-select v-model="form.cardType" placeholder="请选择银行卡类型" clearable>
                <el-option v-for="dict in dict.type.business_bank_card_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="cardName">
              <el-input v-model="form.cardName" placeholder="请输入银行卡名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行" prop="bankId">
              <span class="text" v-if="['1', '2'].includes(form.status)">
                <select-bank isCol :value="form.bankId"/>
              </span>
              <span v-else>
                <select-bank v-model="form.bankId" placeholder="请选择银行类型"/>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="币种" prop="currency">
              <el-select v-model="form.currency" placeholder="请选择币种" clearable>
                <el-option v-for="dict in dict.type.business_bank_card_currency" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期" prop="expiryDate">
              <span class="text" v-if="['1', '2'].includes(form.status)">
                {{ form.expiryDate }}
              </span>
              <span v-else>
                <el-date-picker clearable v-model="form.expiryDate" type="date" value-format="yyyy-MM-dd" placeholder="请输入有效期"/>
              </span>
            </el-form-item>

          </el-col>
          <!--
                    <el-col :span="12">
                      <el-form-item label="CVV加密值" prop="cvvEncrypted">
                        <el-input v-model="form.cvvEncrypted" placeholder="请输入CVV加密值"/>
                      </el-form-item>
                    </el-col>
          -->
          <!-- 停用或启用时候显示 -->
          <el-col :span="12" v-if="['1', '2'].includes(form.status)">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="form.status" active-value="1" inactive-value="2">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormOver">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------ END: 弹出框 -------------------------->
  </div>
</template>
<script>
import {listBankCard, getBankCard, addBankCard, updateBankCard, delBankCard} from "@/api/business/bankCard";
import {initData, baseMethods} from "@/utils/basePage";

let baseData = initData();
export default {
  name: "BankCard",
  dicts: ['business_bank_card_status', 'business_bank_card_type', 'business_bank_card_currency'],
  data() {
    return {
      ...baseData,
      permi: 'business:bankCard',
      // 列信息
      columns: [
        {key: 0, label: `编号`, visible: false},
        {key: 1, label: `卡号`, visible: true},
        {key: 2, label: `所有者`, visible: true},
        {key: 3, label: `卡BIN号`, visible: false},
        {key: 4, label: `类型`, visible: true},
        {key: 5, label: `名称`, visible: true},
        {key: 6, label: `银行`, visible: true},
        {key: 7, label: `币种`, visible: false},
        {key: 8, label: `有效期`, visible: true},
        {key: 9, label: `账户余额`, visible: true},
        {key: 10, label: `状态`, visible: true},
        {key: 11, label: `创建时间`, visible: false},
        {key: 12, label: `创建者`, visible: false},
        {key: 13, label: `更新时间`, visible: false},
        {key: 14, label: `创建者`, visible: false},
      ],
      // 表单校验
      rules: {
        cardNumber: [{required: true, message: "银行卡号不能为空", trigger: "blur"}],
        cardType: [{required: true, message: "银行卡类型不能为空", trigger: "blur"}],
        cardName: [{required: true, message: "银行卡名称不能为空", trigger: "blur"}],
        bankId: [{required: true, message: "银行类型不能为空", trigger: "blur"}],
        currency: [{required: true, message: "币种不能为空", trigger: "blur"}],
      },

      show: {
        cardNumber: ['', '', '', ''],
      },

      // 当前悬停的单元格信息 {rowIndex, columnKey}
      hoveredCell: {},

      // 按钮控制
      // buttonControl:{}

    };
  },
  created() {
    const currentUser = this.$store.state.user;
    this.queryParams.userId = currentUser.id;
    this.getList();
  },
  methods: {
    ...baseMethods(listBankCard, getBankCard, addBankCard, updateBankCard, delBankCard),

    handleCellMouseEnter(row, column, cell, event) {
      // 只处理余额列的悬停
      const rowIndex = row.id
      if (column.label === '账户余额') {
        this.hoveredCell = {
          rowIndex: rowIndex,
          columnKey: 'balance'
        };
      }else if (column.label === '卡号') {
        this.hoveredCell = {
          rowIndex: rowIndex,
          columnKey: 'cardId'
        };
      }
    },

    handleCellMouseLeave(row, column, cell, event) {
        this.hoveredCell = {};
    },

    // 判断单元格是否处于悬停状态
    isCellHovered(rowIndex, columnKey) {
      return this.hoveredCell &&
        this.hoveredCell.rowIndex === rowIndex &&
        this.hoveredCell.columnKey === columnKey;
    },

    handleUpdateOver(row) {
      let numb = row.cardNumber;
      this.handleUpdate(row);
      this.show.cardNumber = [numb.substring(0, 4) || '',
        numb.substring(4, 8) || '',
        numb.substring(8, 12) || '',
        numb.substring(12, 16) || '',
        numb.substring(16) || ''
      ]
    },

    submitFormOver() {
      this.form.cardBin = this.form.cardNumber.substring(0, 6) || '';
      this.form.cardId = this.form.cardNumber.substring(0,4) + "****" + this.form.cardNumber.substring(15)

      this.submitForm();
    },

    cardIdChange() {
      this.form.cardNumber = this.show.cardNumber.join('');
    },

    /// TODO 校验银行卡
    chackCard(row) {
      row.status = '1'
      row.balance = [10000, 100000000, 50000000, 5000][Math.floor(Math.random() * 4)]
      updateBankCard(row).then(xx => {
        this.$message.success('验证通过');
      });
    },

  }
};
</script>
